<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/util.js"></script>

    <script>
        window.onload = function (){
            init();
        }

        async function init(){
            var tk = localStorage.getItem("token");
            await axios.get("/user/getLoginUser",{headers:{token:tk}}).then(e => {
                info = e;
            });
            if(info.data == null || info.data.length == 0){
                $("infoDiv").innerHTML = "你好，请先<a href='/html/login.html'>登陆</a>";
            }
            else{
                $("infoDiv").innerHTML = "欢迎光临，"+info.data.name;
            }
             findProduct(1);
        }
        //分页查询
        async function findProduct(pageNO){
            var info = await ajaxGet("/product/findByItem",
                {pageNO,name:$("name").value});
            var str = "";
            for(var i=0;i<info.list.length;i++){
                var obj = info.list[i];
                str += `<div style="text-align: center;width: 400px;">
                        <img src="/html/productImg/${obj.imgPath}" width="200px" height="260"><br>
                        <span>${obj.name}</span><br>
                        <span>单价：${obj.price}</span><br>
                        <span>评论数量：${obj.infoNum}</span><br>
                        <a href="/html/speak.html?id=${obj.id}">查看</a>
                        </div>`;
            }
            $("productDiv").innerHTML = str;

            var cutStr = "";
            for(var i=1;i<=info.pages;i++){
                cutStr += `<a href="javascript:findProduct(${i})"
                                style="margin-left: 10px">${i}</a>`;
            }
            $("cutPageDiv").innerHTML = cutStr;
        }
    </script>
</head>
<body>
    <div id="infoDiv"></div>
    <div style="display: flex;" id="productDiv"></div>
    <div id="cutPageDiv"></div>

    <div style="margin-top: 50px">
        请输入商品名：<input type="text" id="name"><br>
        <input type="button" value="查询" onclick="findProduct(1)"
               style="margin-left: 150px;">
    </div>
</body>
</html>